{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="/static/index/css/pay.css">
{/block}
{block name="content"}
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">提现列表</h1>
</div>

<div class='weui-content'>
    <!-- 状态Tab切换（适配提现场景：增加“处理中”状态） -->
    <div class="status-tabs">
        <div class="status-tab active" onclick="switchTab(0,this)">全部</div>
        <div class="status-tab" onclick="switchTab(1,this)">审核中</div>
        <div class="status-tab" onclick="switchTab(2,this)">已通过</div>
        <div class="status-tab" onclick="switchTab(-1,this)">已拒绝</div>
    </div>
    <div class="weui-panel">
        <div class="record-list" style="height:90vh; overflow:auto;">


        </div>

        <div class="load-more">已加载全部数据</div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    // 变量初始化（使用let声明，添加注释增强可读性）
    let page = 1;
    let loading = false;  // 加载状态锁：防止并发请求
    let pay_status = 0;   // 当前选中的提现状态
    let switchTimer = null; // Tab切换防抖计时器
    let scrollTimer = null; // 滚动加载防抖计时器
    let requestId = 0;    // 请求唯一标识：用于忽略过期请求

    // 滚动加载更多（防抖+节流优化）
    $(".record-list").infinite().on("infinite", function() {
        if (loading) return; // 加载中直接拦截

        // 防抖：500ms内多次滚动只触发一次
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            if (loading) return; // 二次检查，防止并发

            loading = true; // 上锁
            page++;
            load(page);
        }, 500); // 缩短延迟，平衡响应速度和性能
    });

    // Tab切换（防抖+状态重置）
    function switchTab(status, obj) {
        // 清除上一次切换计时器（快速点击只执行最后一次）
        clearTimeout(switchTimer);

        // 防抖：300ms内快速点击合并为一次
        switchTimer = setTimeout(() => {
            // 重置列表和状态
            $(".record-list").empty();
            loading = false;
            page = 1;
            pay_status = status;
            requestId++; // 更新请求标识，使旧请求失效
            load(page, obj);
        }, 300);
    }

    // 初始加载第一个Tab（优化触发逻辑）
    $(function() {
        const $firstTab = $(".status-tabs").find(".status-tab").eq(0);
        // 主动绑定点击事件，确保参数正确传递
        $firstTab.on("click", function() {
            switchTab(0, this); // 显式传递status和当前Tab元素
        });
        $firstTab.trigger("click"); // 触发初始加载
    });

    // 加载数据（增强状态管理和容错）
    function load(page, obj) {
        $('.load-more').show();
        const currentId = requestId; // 记录当前请求标识

        post("/withdraw-list.html", {
            page: page,
            limit: 7,
            field: "id",
            order: "desc",
            status: pay_status
        }, function(res) {
            // 忽略过期请求（已被新请求替代）
            if (currentId !== requestId) return;

            // 重置加载状态
            loading = false;
            $('.load-more').hide();

            if (res) { // 简化判断：非空即有效（兼容null/undefined）
                $(".record-list").append(res);
            } else {
                // 无更多数据时处理
                loading = true;
                page--; // 回退页码，避免后续无效增长
                // 移除旧提示，避免重复添加
                $(".record-list").find(".weui-cells__title").remove();
                $(".record-list").append(`<div class="weui-cells__title"><p class='center-div'>已无更多数据</p></div>`);
            }

            // 更新Tab激活状态（严格检查obj有效性）
            if (obj && $(obj).length) {
                $(obj).parent().find(".status-tab").removeClass("active");
                $(obj).addClass("active");
            }
        }, function() { // 错误回调（需配合改造后的post方法）
            if (currentId !== requestId) return;

            loading = false;
            $('.load-more').hide();
            page--; // 失败时回退页码
        });
    }
</script>
{/block}
